<template>
	<view class="page-box">
		<uni-cusTitle title='商户管理' color="#000" :isIcon='false'></uni-cusTitle>

		<view class="content-box">
			<view class="info-box">
				<view class="left">
					<view class="big-box">
						<view class="s-box">
							<image class="wh100" src="/static/top_back.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="right">
					<view>天生桥景区</view>
					<text>门店ID：283742937429374</text>
				</view>
			</view>
			
			<view class="s-title">核销记录 <text> (12)</text></view>
			
			<view class="list-box">
				<template v-if="list.length>0">
					<view class="item-box" v-for="(item,index) in list" :key="index">
						<image class="wh100" src="/static/border03.png"></image>
						<view class="right">
							<view class="s-left">
								<text>{{item.title}}</text>
								<view>券 码 ID: {{item.text1}}</view>
								<view>核销时间: {{item.time}}</view>
							</view>
							<view class="s-right">已核销</view>
						</view>
					</view>
			
					<view class="no-box" v-if="isMore">无更多数据了...</view>
				</template>
				<template v-else>
					<uni-empty tips="'暂无数据...'"></uni-empty>
				</template>
			</view>
		</view>
		
		<view class="bom-box">
			<view class="daka-btn" @click="sacaTap">
				<image src="/static/saca.png"></image>
				<text>扫码核销</text>
			</view>
			<view class="s-right" @click="toHexiao">
				<uni-icons type="compose" size="26" color="#884FFF"></uni-icons>
				<text>手动输入</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$base.staticUrl,
				list: [{
						price: 30,
						text1: '2384719247194',
						title: '天生桥景区优惠券',
						time: '2024.03.23 12:3',
					},
					{
						price: 30,
						text1: '2384719247194',
						title: '天生桥景区优惠券',
						time: '2024.03.23 12:3',
					},
					{
						price: 30,
						text1: '2384719247194',
						title: '天生桥景区优惠券',
						time: '2024.03.23 12:3',
					},
					{
						price: 30,
						text1: '2384719247194',
						title: '天生桥景区优惠券',
						time: '2024.03.23 12:3',
					},
					{
						price: 30,
						text1: '2384719247194',
						title: '天生桥景区优惠券',
						time: '2024.03.23 12:3',
					},
					{
						price: 30,
						text1: '2384719247194',
						title: '天生桥景区优惠券',
						time: '2024.03.23 12:3',
					},
					{
						price: 30,
						text1: '2384719247194',
						title: '天生桥景区优惠券',
						time: '2024.03.23 12:3',
					},
					{
						price: 30,
						text1: '2384719247194',
						title: '天生桥景区优惠券',
						time: '2024.03.23 12:3',
					},
					{
						price: 30,
						text1: '2384719247194',
						title: '天生桥景区优惠券',
						time: '2024.03.23 12:3',
					}
				],
			}
		},

		onLoad() {

		},
		methods: {
			sacaTap(){
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			
			toHexiao(){
				uni.navigateTo({
					url:'./hexiao'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-box{
		width: 690rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top:180rpx;
		left:50%;
		transform: translateX(-50%);
		padding-bottom:180rpx;
		// 活动说明
		.s-title {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 52rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #002A3A;
			margin-top:42rpx;
			margin-bottom: 30rpx;
			text{
				font-size: 26rpx;
				color:#884FFF;
				margin-top:10rpx;
				margin-left:10rpx;
			}
		
			&::before {
				content: '';
				display: block;
				width: 6rpx;
				height: 32rpx;
				background: #884FFF;
				border-radius: 4rpx;
				margin-right: 16rpx;
			}
		}
		
		.list-box {
			width: 100%;
			margin-top: 20rpx;
		
			.item-box {
				width: 100%;
				height: 170rpx;
				position: relative;
				display: flex;
				margin-bottom: 30rpx;
		
				image {
					position: absolute;
					left: 0;
					top: 0
				}
		
				.right {
					width:690rpx;
					height: 100%;
					position: relative;
					padding: 20rpx 30rpx 20rpx 46rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
		
					.s-left {
						width: 480rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
		
						text {
							font-size: 35rpx;
							font-weight: bold;
							color: #002A3A;
							line-height: 56rpx;
						}
		
						view {
							font-size: 28rpx;
							font-weight: bold;
							color: #3A525E;
							margin-top:6rpx;
						}
					}
		
					.s-right {
						width: 132rpx;
						height: 56rpx;
						background: #E7E9EA;
						border-radius: 48rpx;
						display: flex;
						justify-content: center;
						align-items: center;
		
						font-size: 28rpx;
						font-weight: bold;
						color: #fff;
					}
		
					.s-right1 {
						width: 124rpx;
						height: 108rpx;
						position: absolute;
						right: 5rpx;
						top: 5rpx;
						overflow: hidden;
					}
				}
			}
		}
	}
	
	.info-box {
		width: 100%;
		padding:23rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		border-radius: 48rpx;
		border: 4rpx solid #FFDD57;

		.left {
			width: 200rpx;
			display: flex;
			align-items: center;

			.big-box {
				width: 174rpx;
				height: 132rpx;
				background: #884FFF;
				border-radius: 32rpx;

				.s-box {
					width: 174rpx;
					height: 132rpx;
					border-radius: 32rpx;
					overflow: hidden;
					transform: translate(-5rpx, -5rpx);
				}
			}
		}

		&::before {
			content: '';
			display: block;
			width: 36rpx;
			height: 36rpx;
			background: #FAEDFC;
			border-radius: 50%;
			position: absolute;
			bottom: -18rpx;
			left: -48rpx;
		}

		&::after {
			content: '';
			display: block;
			width: 36rpx;
			height: 36rpx;
			background: #FAEDFC;
			border-radius: 50%;
			position: absolute;
			bottom: -18rpx;
			right: -48rpx;
		}

		.right {
			flex: 1;
			height: 100%;
			padding: 10rpx 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			font-size: 26rpx;
			color: #3A525E;
			font-weight: bold;

			view {
				font-size: 32rpx;
				color: #002A3A;
				margin-bottom: 20rpx;
			}
		}
	}

	.bom-box{
		width: 750rpx;
		height: 168rpx;
		background: #FFFFFF;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0 30rpx;
		box-sizing: border-box;
		
		.daka-btn {
			width: 554rpx;
			height: 96rpx;
			background: #FFDD57;
			border-radius: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		
			font-size: 36rpx;
			font-weight: bold;
			color: #884FFF;
		
			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;
			}
		}
		.s-right {
			height:100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: #884FFF;
			font-weight: bold;
		}
	}
</style>